<template>
    <div class="create-post-page">
        <h4>{{ isEditMode ? '编辑文章' : '新建文章' }}</h4>
        <!-- <input type="file" name="file" @change.prevent="handleFileChange" class="mb-2"/> -->
        <upload 
            action="/api/upload" 
            :before-upload="uploadCheck" 
            @file-uploaded="handleFileUploaded"
            :uploaded="uploadedData"
            class="d-flex align-items-center justify-content-center bg-light text-secondary w-100 my-4">
            <h2>点击上传头图</h2>
            <template #loading>
                <div class="d-flex">
                    <div class="spinner-border text-secondary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <h2>正在上传...</h2>
                </div>
            </template>
            <template #uploaded="dataProps">
                <img :src="dataProps.uploadedData && dataProps.uploadedData.data.url || ''" />
            </template>
        </upload>
        <validate-form @form-submit="onFormSubmit">
            <div class="mb-3">
                <label class="form-label">文章标题：</label>
                <validate-input :rules="titleRules" v-model="titleVal" placeholder="请输入文章标题" type="text" />
            </div>
            <div class="mb-3">
                <label class="form-label">文章详情：</label>
                <validate-input rows="10" type="textarea" tag="textarea" placeholder="请输入文章详情" :rules="contentRules"
                    v-model="contentVal" />
            </div>
            <template #submit>
                <button class="btn btn-primary btn-large">{{ isEditMode ? '更新文章' : '发表文章' }}</button>
            </template>
        </validate-form>
    </div>
</template>

<script setup lang="ts">
import ValidateForm from '@/components/form/ValidateForm.vue';
import ValidateInput from '@/components/form/ValidateInput.vue';
import Upload from '@/components/Upload.vue';
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { GlobalDataProps, ImageProps, ResponseType } from '@/types';
import { PostProps, RulesProp } from '@/types';
import { ref, onMounted, toRaw } from 'vue';
import { beforeUploadCheck } from '@/utils/FileUtils';
import createMessage from '@/components/createMessage';

const store = useStore<GlobalDataProps>();
const titleVal = ref('');
const contentVal = ref('');
const uploadedData = ref();

const router = useRouter();
const route = useRoute();

let imageId = '';

const isEditMode = !!route.query.id;
const titleRules: RulesProp = [
    { type: 'required', message: '文章标题不能为空' }
]
const contentRules: RulesProp = [
    { type: 'required', message: '文章详情不能为空' }
];

onMounted(() => {
    if (isEditMode) {
        store.dispatch('fetchPost', route.query.id).then((rawData: ResponseType<PostProps>) => {
            console.log(rawData.data);
            const currentPost = rawData.data;
            if (currentPost.image) {
                uploadedData.value = { data: currentPost.image }
            }
            titleVal.value = currentPost.title
            contentVal.value = currentPost.content || ''
        })
    }
})
const handleFileUploaded = (rawData: ResponseType<ImageProps>) => {
    if (rawData.data._id) {
        imageId = rawData.data._id;
    }
}

const onFormSubmit = (result: boolean) => {
    if (result) {
        const { column, _id } = store.state.user
        if (column) {
            const newPost: PostProps = {
                title: titleVal.value,
                content: contentVal.value,
                column,
                author: _id
            }
            if (imageId) {
                newPost.image = imageId
            }
            const actionName = isEditMode ? 'updatePost' : 'createPost'
            const sendData = isEditMode ? {
                id: route.query.id,
                payload: newPost
            } : newPost
            console.log('post data');
            store.dispatch(actionName, sendData).then(() => {
                createMessage('发表成功，2秒后跳转到文章', 'success', 2000)
                setTimeout(() => {
                    router.push({ name: 'ColumnDetail', params: { id: column } })
                }, 2000)
            })
        }
    }
}

const uploadCheck = (file: File) => {
    const result = beforeUploadCheck(file, { format: ['image/jpeg', 'image/png'], size: 1 });
    const { passed, error } = result;
    if (error === 'format') {
        createMessage('上传图片只能是 JPG/PNG 格式', 'error');
    }
    if (error === 'size') {
        createMessage('上传图片大小不能超过 1Mb', 'error');
    }
    return passed;
}
</script>

<style>
.create-post-page .file-upload-container {
  height: 200px;
  cursor: pointer;
  overflow: hidden;
}
.create-post-page .file-upload-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.uploaded-area {
  position: relative;
}
.uploaded-area:hover h3 {
  display: block;
}
.uploaded-area h3 {
  display: none;
  position: absolute;
  color: #999;
  text-align: center;
  width: 100%;
  top: 50%;
}
</style>